<template>
    <div class='_container'>
        <template v-for='(item, index) in strArr'>
            <div class='_item _num' v-if='!isNaN(item)' :key='index'>
                <div class='_nums' :style='{transform : "translateY(-" + (item * 2.135416666666667) + "rem)"}'>
                    <div class='_value' v-for='(v, i) in [0,1,2,3,4,5,6,7,8,9]' :key='i'>
                        <span class='_wrap'>{{v}}</span>
                    </div>
                </div>
            </div>
            <div class='_item _punctuation' v-else :key='index'>{{item}}
                <span class='_comma'></span>
            </div>
        </template>
    </div>
</template>

<script>
export default {
    name : 'num-count',

    props : {
        value : {
            type : Number,
            value : 0
        }
    },

    computed : {
        strArr () {
            var strArr = []
            var values = String(this.value).split('.')
            var value = values[0].split('')
            while (true) {
                for(let i = 0; i < 3 ; i ++){
                    var item = value.pop()
                    if(item === undefined) {
                        break
                    }else {
                        strArr.push(item)
                        if(i == 2) {
                            strArr.push(',')
                            i = -1
                        }
                    }
                }

                break
            }
            
            if(strArr[strArr.length - 1] === ',') {
                strArr.pop()
            }
            strArr.reverse()

            return strArr
        }
    }
}
</script>

<style scoped lang='scss'>
    ._comma{
        position: absolute;
        width: 4px;
        height: 8px;
        @include background('punctuation.png');
        background-size: 100% 100%;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    $h : 41px;
    ._container{
        display: inline-block;
        font-size: 0;
        vertical-align: top;
        
        ._item{
            display: inline-block;
            position: relative;
            margin-left: 2px;
            &:first-child{
                margin-left: 0;
            }

            &._num{
                width: 29px;
                height: $h;
                @include background('num-count.png');
                background-size: 100% 100%;
                overflow: hidden;

                ._nums{
                    position: absolute;
                    width: 100%;
                    top: 0;
                    left: 0;
                    transition: transform 1s;

                    ._value{
                        position: relative;
                        height: $h;

                        ._wrap{
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);

                            color: #7edff3;
                            font-size: 32px;
                        }
                    }
                }

            }

            


            &._punctuation{
                width: 6px;
            }
        }
    }
</style>